<template>
	<div class="test_box animated fadeInUp">
		<div class="test_title">
			<li>
				<p>{{ dataList.test_title }}</p>
			</li>
			<li>
				<button @click="goback">返回</button>
			</li>
		</div>
		<div class="test_list">

			<div class="test_list_title">
				<div v-for="(ite) in dataList.list">
					<div v-for="(item,index) in ite">
						<div class="stem" v-if="item.reason && index == 0">
							<p>{{item.reason}}</p>
						</div>
						<p :class="{ismistake:item.answer!==item.choose_answer}">{{ item.idxId}}、{{ item.question }}111
						</p>
						<li v-if="item.type == 'multiple'">
							<el-checkbox-group :value="item.choose_answer" :name="item.exam_id">
								<el-checkbox :label="items.id" disabled
									v-for="(items, index) in ite.option">{{items.id}}{{items.name == '.'?'':'：'+items.name}}</el-checkbox>
							</el-checkbox-group>
						</li>
						<li v-if="item.type !== 'multiple'">
							<el-radio-group v-model="item.choose_answer">
								<el-radio :label="items.id" size="large" disabled
									v-for="(items, index) in item.option">{{ items.id }}{{items.name == '.'?'':'：'+items.name}}</el-radio>
							</el-radio-group>

						</li>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script setup>
	import axios from "axios";
	import {
		reactive,
		ref,
		onMounted,
		onBeforeUnmount,
		onBeforeMount
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		test_title: '',
		id: '',
		list: ''
	})
	onBeforeMount(() => {
		dataList.test_title = router.currentRoute.value.query.title
		dataList.id = router.currentRoute.value.query.id
		getList(router.currentRoute.value.query.id)
	})
	const getList = (id) => {
		axios({
			url: '/Exam/answer_detail',
			baseURL: 'http://kaoshiguanli.haimijiaoyu.com/api/',
			method: 'post',
			data: {
				id
			}
		}).then(res => {
			var idxId = 1
			dataList.list = res.data.list
			delete dataList.list.score
			for (var item in dataList.list) {
				for (var key in dataList.list[item]) {
					dataList.list[item][key].idxId = idxId
					idxId += 1
				}
			}
		})
	}
	const goback = () => {
		router.back()
	}
</script>

<style lang="scss" scoped>
	.biaoyi {
		background-color: #FF5151;
		color: #FFFFFF;
		border: none;
		padding: 3px 10px;
		border-radius: 10px;
	}

	:deep(.is-checked .el-radio__inner) {
		background: #1CABD9 !important;
		border-color: #1CABD9 !important;
	}

	.ismistake {
		color: #E50101 !important;
	}

	@media screen and (min-width:1200px) {
		.stage {

			// opacity: 0;
			p {
				width: fit-content;
				background-color: #EFEFEF;
				border-radius: 10px;
				font-size: 16px;
				color: #666666;
				padding: 10px 20px;
				cursor: pointer;
				margin-bottom: 20px;
			}

			.stage_select {
				background-color: #1CABD9;
				color: #FFFFFF;
			}
		}

		.test_box {
			width: 1000px;
			margin: 0 auto;
			min-height: 500px;
			position: relative;

			.after {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 48px;
				height: 104px;
				background: #D9D9D9;
				position: absolute;
				top: 350px;
				cursor: pointer;

				img {
					width: 11px;
					height: 30px;
				}
			}

			.right-icon {
				right: -48px;
			}

			.left-icon {
				left: -48px;
			}

			.test_title {
				background: #1CABD9;
				display: flex;
				justify-content: space-between;
				width: 1000px;
				height: 77px;
				margin-top: 40px;

				li {
					display: flex;
					align-items: center;
					padding: 25px;

					p {
						font-size: 20px;
						font-weight: 600;
						color: #FFFFFF;
					}

					img {
						margin-right: 15px;
						width: 29px;
						height: 29px;
					}

					span {
						font-size: 22px;
						font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
						font-weight: 600;
						color: #FFFFFF;
					}

					button {
						width: 112px;
						height: 37px;
						background: #FFFFFF;
						border-radius: 37px;
						font-weight: 400;
						border: none;
						color: #1CABD9;
						margin-left: 40px;
					}

					button:last-child {
						background: #FFFFFF;
						color: #333333;
					}
				}
			}

			.test_list {
				width: 1000px;
				min-height: 800px;
				background: #F3FCFF;
				border-radius: 10px 10px 10px 10px;
				padding: 30px;
				display: flex;
				justify-content: space-between;
				margin-bottom: 30px;

				.cardBtn {
					display: none;
					background-color: #1CABD9;
				}

				.test_list_title {
					.stem {
						width: 470px;
						padding: 15px;
						background: rgba(28, 171, 217, 0.2);
						border-radius: 10px;
						border: 1px solid #1CABD9;
						margin-bottom: 30px;

						p {
							margin-bottom: 0;
							max-width: 500px;
							font-size: 18px;
							color: #333333;
						}
					}

					p {
						margin-bottom: 15px;
						max-width: 500px;
						font-size: 18px;
						font-weight: 400;
						color: #333333;
					}

					// checkbox
					:deep(.el-radio__input),
					:deep(.el-checkbox__input) {
						margin-top: 2px;
					}

					:deep(.el-radio__label),
					:deep(.el-checkbox__label) {
						max-width: 500px;
						color: #1CABD9;
						white-space: break-spaces;
					}

					:deep(.is-checked) {
						.el-radio__inner {
							border-color: #1CABD9;
						}

						.el-radio__label,
						.el-checkbox__label {
							color: #1CABD9;
						}

					}

					:deep(.el-radio) {
						display: flex;
						align-items: flex-start;
						height: auto;
						margin-bottom: 20px;
					}
				}

				.test_list_option {
					display: flex;
					flex-wrap: wrap;
					width: 361px;
					height: fit-content;
					// border-top: 1px solid #C6C6C6;
					border-left: 1px solid #C6C6C6;

					span {
						width: 36px;
						height: 36px;
						line-height: 36px;
						cursor: pointer;
						border-top: 1px solid #C6C6C6;
						border-right: 1px solid #C6C6C6;
						border-bottom: 1px solid #C6C6C6;
						text-align: center;

						span {
							width: 100%;
							height: 100%;
							display: block;
							border: 0 !important;
						}
					}

					.isover {
						background-color: #1CABD9;
						color: #FFFFFF;
					}

					.iscurrent {
						background-color: #FF9933 !important;
						color: #FFFFFF;
					}

					.biaoyibtn {
						background-color: #FF5151;
						color: #FFFFFF;
					}

					.linked {
						border-right: none;
					}

					span:last-child {
						border-right: 1px solid #C6C6C6;
					}

					// span:nth-child(-n + 10){
					// 	border-bottom: none;
					// }
				}

				.el-radio-group,
				.el-checkbox-group {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
				}
			}
		}
	}

	@media screen and (max-width: 1200px) {
		.stage {
			opacity: 0;
			display: flex;

			p {
				width: fit-content;
				background-color: #EFEFEF;
				border-radius: 1.5vw;
				font-size: 2.1vw;
				color: #666666;
				padding: 1.5vw 2.5vw;
				cursor: pointer;
				margin-bottom: 3vw;
				margin-right: 3vw;
			}

			.stage_select {
				background-color: #1CABD9;
				color: #FFFFFF;
			}
		}

		.test_box {
			width: 95vw;
			margin: 0 auto;
			min-height: 61vh;
			position: relative;

			.after {
				z-index: 9999;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 12vw;
				height: 6vw;
				background: #D9D9D9;
				position: absolute;
				bottom: 2vw;
				cursor: pointer;

				img {
					width: 1.4vw;
					height: 4vw;
				}
			}

			.right-icon {
				right: 6.4vw;
			}

			.left-icon {
				left: 6.4vw;
			}

			.test_title {
				background: #1CABD9;
				display: flex;
				justify-content: space-between;
				width: 95vw;
				// height: 77px;
				margin-top: 40px;

				li {
					display: flex;
					align-items: center;
					padding: 3vw;

					p {
						font-size: 2.66vw;
						font-weight: 600;
						color: #FFFFFF;
					}

					img {
						margin-right: 2vw;
						width: 4vw;
						height: 4vw;
					}

					span {
						font-size: 2.9vw;
						font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
						font-weight: 600;
						color: #FFFFFF;
					}

					button {
						width: 14.9vw;
						height: 4.9vw;
						font-size: 2.1vw;
						background: #FFFFFF;
						border-radius: 4.6vw;
						font-weight: 400;
						border: none;
						color: #1CABD9;
						margin-left: 3vw;
					}

					button:last-child {
						background: #FFFFFF;
						color: #333333;
					}
				}
			}

			.test_list {
				// width: 95vw;
				min-height: 20vh;
				background: #F3FCFF;
				border-radius: 1.2vw;
				padding: 4vw 4vw 12vw 4vw;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				position: relative;
				margin-bottom: 4vw;
				.cardBtn {
					width: 20vw;
					padding: 1vw 2vw;
					background-color: #1CABD9;
					color: #FFFFFF;
					border: none;
					border-radius: 5vw;
					margin: 3vw 0;
				}

				.test_list_title {
					p {
						margin-bottom: 2vw;
						max-width: 95vw;
						font-size: 2.4vw;
						font-weight: 400;
						color: #333333;
					}

					// checkbox
					:deep(.el-radio__label),
					:deep(.el-checkbox__label) {
						font-size: 2.4vw !important;
					}

					:deep(.is-checked) {
						.el-radio__inner {
							background: #1CABD9 !important;
							border-color: #1CABD9 !important;
						}

						.el-radio__label,
						.el-checkbox__label {
							color: #1CABD9;

						}
					}

					:deep(.el-radio) {
						display: flex;
						align-items: flex-start;
						height: auto;
						margin-bottom: 2vw;
					}

					:deep(.el-radio__input) {
						margin-top: 2px;
					}

					:deep(.el-radio__label),
					:deep(.el-checkbox__label) {
						max-width: 95vw;
						color: #1CABD9;
						white-space: break-spaces;
					}
				}

				.test_list_option {
					display: flex;
					flex-wrap: wrap;
					border-left: 1px solid #C6C6C6;
					margin: 0 auto;
					transition: all 0.5s;
					overflow: hidden;
					opacity: 0;

					span {
						min-width: 7vw;

						cursor: pointer;
						border-right: 1px solid #C6C6C6;
						border-bottom: 1px solid #C6C6C6;
						border-top: 1px solid #C6C6C6;
						text-align: center;
						font-size: 1.8vw;

						span {
							width: 100%;
							height: 100%;
							display: block;
							border: 0 !important;
							padding: 1.5vw 1vw;
						}
					}

					.isover {
						background-color: #1CABD9;
						color: #FFFFFF;
					}

					.iscurrent {
						background-color: #FF9933;
						color: #FFFFFF;
					}

					.linked {
						border-right: none;
					}

					span:last-child {
						border-right: 1px solid #C6C6C6;
					}
				}

				.isopen {
					opacity: 1;
				}

				.el-radio-group,
				.el-checkbox-group {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
				}
			}
		}
	}
</style>